<template>
  <div class="five">
    <dv-border-box-11 title="TOP5 综合分">
      <div class="box" style="width:100%;height:800px;">            
        <div id="bydt5point" style="width:650px;height:600px;"></div>
        <div id="tslt5point" style="width:650px;height:600px;"></div>     
      </div>
    </dv-border-box-11>
    <dv-border-box-11 title="词云图">
      <div class="word" style="width:100%;height:800px;">
        <dv-border-box-8 style="width:680px;height:700px;">
          <h2 style="color:white;width:100%;height:20px;">比亚迪宋PLUS DM-i</h2>
          <div class="btnbox">
            <button style="background-color: #67C23A;" @click="choose(1)">积极</button>
            <button style="background-color: #F56C6C;" @click="choose(2)">消极</button>
            <button style="background-color: #E6A23C;" @click="choose(3)">中立</button>
          </div>
          <img src="@/assets/byd/9.评论内容为积极词云图.png" alt="" v-if="bydimgnum == 1">
          <img src="@/assets/byd/8.评论内容为消极词云图.png" alt="" v-else-if="bydimgnum == 2">
          <img src="@/assets/byd/10.评论内容为中立词云图.png" alt="" v-else>
        </dv-border-box-8>

        <dv-border-box-8 style="width:680px;height:700px;">
          <h2 style="color:white;width:100%;height:20px;">特斯拉Model Y</h2>
          <div class="btnbox">
            <button style="background-color: #67C23A;" @click="choosetsl(1)">积极</button>
            <button style="background-color: #F56C6C;" @click="choosetsl(2)">消极</button>
            <button style="background-color: #E6A23C;" @click="choosetsl(3)">中立</button>
          </div>
          <img src="@/assets/tsl/9.评论内容为积极词云图.png" alt="" v-if="tslimgnum == 1">
          <img src="@/assets/tsl/8.评论内容为消极词云图.png" alt="" v-else-if="tslimgnum == 2">
          <img src="@/assets/tsl/10.评论内容为中立词云图.png" alt="" v-else>
        </dv-border-box-8>
      </div>
    </dv-border-box-11>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bydimgnum: 1,
      tslimgnum: 1
    }
  },
  methods: {
    choose(num) {
      this.bydimgnum = num
    },
    choosetsl(num) {
      this.tslimgnum = num
    },
    byd() {
      var myChart = this.$echarts.init(document.getElementById('bydt5point'));
      var option = {
        toolbox: {
          show: true,
           feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true, backgroundColor: 'black' }
          },
          iconStyle: {
             borderColor: 'white'
          },
          left: 'auto'
        },
        title: {
          text: '比亚迪宋PLUS DM-i',
          left: 'center',
          textStyle: {
            color: 'orange'
          }
        },
        textStyle: {
          color: 'white'
        },
        legend: {
          top: 'bottom',
          textStyle: {
            color: "white"
          }
        },
        tooltip: {},
        series: [
          {
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            label:{
              show: true,
              position: 'outside',
              color: 'white',
              formatter: '{d}%',
            },
            data: [
              { value: 161, name: '4.14分' },
              { value: 154, name: '4.00分' },
              { value: 140, name: '4.50分' },
              { value: 138, name: '4.36分' },
              { value: 135, name: '4.57分' },
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    tsl() {
      var myChart = this.$echarts.init(document.getElementById('tslt5point'));
      var option = {
        toolbox: {
          show: true,
           feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true, backgroundColor: 'black' }
          },
          iconStyle: {
             borderColor: 'white'
          },
          left: 'auto'
        },
        title: {
          text: '特斯拉Model Y',
          left: 'center',
          textStyle: {
            color: 'orange'
          }
        },
        textStyle: {
          color: 'white'
        },
        legend: {
          top: 'bottom',
          textStyle: {
            color: "white"
          }
        },
        tooltip: {},
        series: [
          {
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            label:{
              show: true,
              position: 'outside',
              color: 'white',
              formatter: '{d}%',
            },
            data: [
              { value: 56, name: '4.50分' },
              { value: 53, name: '4.07分' },
              { value: 50, name: '4.57分' },
              { value: 49, name: '4.21分' },
              { value: 48, name: '4.71分' },
            ]
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted() {
    this.byd(),
    this.tsl()
  },
}
</script>

<style lang="less" scoped>
.five {
  width: 1897px;
  .box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    
  }
}
.word {
  display: flex;
  justify-content: space-around;
  .dv-border-box-8 {
    margin-top: 75px;
    h2 {
      text-align: center;
      margin-top: 30px;
    }
    img {
      width: 600px;
      height: 500px;
      margin-left: 40px;
      margin-top: 20px;
    }
  }
}
.btnbox {
  width: 400px;
  height: 50px;
  // border: 1px solid #ddc8c8;
  margin-top: 40px;
  margin-left: 40px;
  button {
    color: white;
    width: 70px;
    height: 40px;
    border: none;
    outline-color: white;
    margin-top: 5px;
    margin-right: 20px;
  }
}

</style>